<template>
  <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
  <div class="top">
    <van-cell title="选择线路" is-link />
    <van-cell center title="极速模式">
      <template #right-icon>
        <van-switch v-model="checked1" size="24" />
      </template>
    </van-cell>
  </div>
  <span>开启后，部分动效将会关闭，建议设备性能较差的用户开启</span>

  <div class="top">
    <van-cell center title="AI智能测距">
      <template #right-icon>
        <van-switch v-model="checked2" size="24" />
      </template>
    </van-cell>
    <van-cell center title="护眼模式">
      <template #right-icon>
        <van-switch v-model="checked3" size="24" />
      </template>
    </van-cell>
    <van-cell center title="使用时长提醒">
      <template #right-icon>
        <van-switch v-model="checked4" size="24" />
      </template>
    </van-cell>
  </div>
  <span>开启后,没持续使用60分钟，会提示休息一下</span>

  <div class="top"><van-cell value="v3.19.1" is-link title="关于我们" /></div>

  <van-button type="primary" size="large" round @click="outLogin"
    >退出登录</van-button
  >
</template>

<script>
import { ref, reactive } from "vue";
import { getSetInfoApi, updataSetApi } from "../utils/api";
import { useRouter } from "vue-router";
export default {
  setup() {
    const checked1 = ref(false);
    const checked2 = ref(false);
    const checked3 = ref(false);
    const checked4 = ref(false);
    const router = useRouter();
    let checkedlist = reactive({});
    let token = localStorage.getItem("token");

    getSetInfoApi({ token }).then((res) => {
      checked1.value = res.results.checkout1;
      checked2.value = res.results.checkout2;
      checked3.value = res.results.checkout3;
      checked4.value = res.results.checkout4;
    });

    const onClickLeft = () => {
      let sendlist = {
        token: localStorage.getItem("token"),
        checkout: JSON.stringify({
          checkout1: checked1.value,
          checkout2: checked2.value,
          checkout3: checked3.value,
          checkout4: checked4.value,
        }),
      };
      updataSetApi(sendlist).then((res) => {
        console.log(res);
        history.back();
      });
    };

    const outLogin = () => {
      localStorage.setItem("token", "");
      router.push("/login");
    };
    return {
      checked1,
      checked2,
      checked3,
      checked4,
      checkedlist,
      onClickLeft,
      outLogin,
    };
  },
};
</script>

<style lang="less" scoped>
.top {
  width: 345px;
  margin-top: 7px;
  margin-left: 15px;
}

/deep/.van-cell {
  align-items: center;
}
/deep/ .van-cell__title {
  height: 45px;
  line-height: 45px;
  font-weight: 700;
}

span {
  display: block;
  width: 100%;
  font-size: 12px;
  color: gray;
  text-align: center;
  margin-top: 14px;
}

.van-button {
  width: 300px;
  margin: 30px 0 0 37px;
}
</style>
